
<template>
  <div class="excel-import">
    <el-dialog
      v-el-drag-dialog
      :title="importGrid.title?importGrid.title : title"
      :visible.sync="importGrid.fmodal"
      :close-on-click-modal="false"
      :show-close="true"
      class="excel-import-modal"
      width="78%"
      @close="closeDialog">
      <div class="search-grid" style="margin-bottom: 20px;">
        <vxe-button v-if="isAdd" status="success" icon="vxe-icon-add" content="新增" @click="importGridAdd"/>
        <vxe-button v-if="isSave" status="success" icon="vxe-icon-save" content="保存" @click="importGridSave"/>
        <vxe-button v-if="isImport" class="import-excel" status="primary" content="导入Excel" @click="toImport" />
        <vxe-button v-if="isDel" status="success" icon="vxe-icon-delete" content="删除" @click="importGridDel"/>
        <ExcelImport
          :ref="importGrid.excelRefs"
          :data-row="importGrid.dataRow"
          :value-match="importGrid.fieldArr"
          :accept="importGrid.accept"
          @changeExcel="uploadExamFile" />
      </div>
      <vxe-grid
        :class="importGrid.class"
        :id="importGrid.id"
        :ref="importGrid.gridRefs"
        :print-config="{}"
        :import-config="{}"
        :export-config="{}"
        :columns="importGrid.columns"
        :toolbar-config="importGrid.tableToolbar"
        :data="importGrid.data"
        :custom-config="{storage: true}"
        :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
        align="center"
        height="450"
        border
        resizable
        keep-source>
        <slot/>
      </vxe-grid>
    </el-dialog>
  </div>

</template>
<script>
export default {
  name: 'GridExcelImports',
  props: {
    isAdd: {
      type: Boolean,
      default: false
    },
    isSave: {
      type: Boolean,
      default: true
    },
    isImport: {
      type: Boolean,
      default: true
    },
    isDel: {
      type: Boolean,
      default: false
    },
    importGrid: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      title: '详情'
      // options: [],

    }
  },
  // watch: {
  //   lists(val) {
  //     this.options = val
  //   }
  // },
  created() {
    console.log(this.importGrid, ' this.importGrid  GridExcelImport ')
  },
  methods: {
    getColumns() {
      this.importGrid.fieldCap.map(item => {
        this.importGrid.fieldArr.push(item.field)
        this.importGrid.valueTitle.push(item.frecap)
        this.importGrid.columns.push({
          field: item.field,
          title: item.frecap,
          editRender: {},
          slots: { edit: item.field + '_edit' }
        })
      })
    },
    exportTableData() {
      this.importGrid.fmodal = true
      this.importGridDel()
    },
    // 获取数据
    uploadExamFile(data) {
      console.log('导出的数据', data)
      this.importGrid.data = data
    },
    importData() {
      this.importGrid.fmodal = true
      this.importGridDel()
    },
    toImport() {
      this.$refs[this.importGrid.excelRefs].open()
    },
    importGridAdd() { // 新增
      const $grid = this.$refs[this.importGrid.gridRefs]
      $grid.insertAt(-1, -1)
    },
    importGridDel() { // 删除当前行
      const $grid = this.$refs[this.importGrid.gridRefs]
      if ($grid) {
        const checkData = $grid.getCheckboxRecords()
        if (checkData.length) {
          $grid.removeCheckboxRow()
        } else {
          this.importGrid.data = []
          $grid.remove($grid.getCheckboxRecords())
        }
      }
    },
    async importGridSave() { // 保存
      this.$emit('importGridSave')
    },
    closeDialog() {
      this.importGrid.rows = ''
      this.importGrid.fbillno = ''
      this.importGrid.fmodel = ''
      this.importGrid.fbrand = ''
      this.importGridDel()
    }
  }
}
</script>
<style scoped>

</style>
